<script setup>
  import { ref, onMounted } from 'vue'
  import messageApi from '@/apis/message'
  const announceList = ref([])
  const nextPage = ref(1)
  const hasMore = ref(true)
  const isTriggered = ref(false)
  onMounted(() => {
    getAnnounceList()
  })
  function onScrolltolower() {
    if (!hasMore.value) return
    getAnnounceList(nextPage.value)
  }
  async function onScrollRefresh() {
    isTriggered.value = true
    await getAnnounceList()
    isTriggered.value = false
  }
  async function getAnnounceList(page = 1, pageSize = 5) {
    const { code, data } = await messageApi.list(200, page, pageSize)
    if (code !== 200) return uni.utils.toast('数据获取失败！')
    if (page === 1) announceList.value = []
    announceList.value = [...announceList.value, ...data.items]
    nextPage.value = ++data.page
    hasMore.value = nextPage.value <= data.pages
  }
</script>
<template>
  <scroll-view
    @scrolltolower="onScrolltolower"
    @refresherrefresh="onScrollRefresh"
    :refresher-triggered="isTriggered"
    class="scroll-view"
    refresher-enabled
    scroll-y
  >
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-list :border="false">
        <uni-list-item
          v-for="announce in announceList"
          :key="announce.id"
          to="/subpkg_message/content/index"
          ellipsis="1"
          :title="announce.title"
          :rightText="announce.created"
        >
          <template v-slot:header>
            <text v-if="!announce.isRead" class="dot"></text>
          </template>
        </uni-list-item> </uni-list
    ></view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
